body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

.color-transparent {
  color: transparent;
}

[class*=ok-hairline]:after {
  position: absolute;
  box-sizing: border-box;
  content: ' ';
  pointer-events: none;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  //border: 0 solid #ebedf0;
  border: 0 solid #dfdfdf;
  transform: scale(.5)
}

.ok-hairline, .ok-hairline--bottom, .ok-hairline--left, .ok-hairline--right, .ok-hairline--surround, .ok-hairline--top, .ok-hairline--top-bottom {
  position: relative
}

.ok-hairline--top:after {
  border-top-width: 1px
}

.ok-hairline--left:after {
  border-left-width: 1px
}

.ok-hairline--right:after {
  border-right-width: 1px
}

.ok-hairline--bottom:after {
  border-bottom-width: 1px
}

.ok-hairline--top-bottom:after, .ok-hairline-unset--top-bottom::after {
  border-width: 1px 0
}

.ok-hairline--surround:after {
  border-width: 1px
}
